<template>
    <el-row>
        <el-col :span="10" style="padding-right: 10px;">
            <el-card :body-style="{ width: '510px', height: '360px' }">
                <el-carousel height="320px" direction="vertical" :autoplay="false">
                    <el-carousel-item v-for="item in NewestInfo.systemAnnouncements" :key="item.announcementId">
                        <h1 class="medium" id="infoTitle">
                            {{ item.title }}
                            <div v-if="item.isPinned == true" style="display: grid; align-items: center;">
                                <el-tag type="success" size="small">置顶公告</el-tag>
                            </div>
                        </h1>

                        <p class="medium">
                            {{ item.content }}
                        </p>
                        <div id="InfoTime">
                            <div class="time">公告发布时间 : {{ item.publishTime }}</div>
                            <div class="author">公告生效时间 : {{ item.startEffectiveTime }}</div>

                            <div class="comment">{{ item.commentNum }}</div>
                        </div>
                    </el-carousel-item>
                </el-carousel>

            </el-card>
            <el-card style="margin-top: 10PX;height: 310PX;">
                <el-table :data="tableData" height="270" style="width: 100%">
                    <el-table-column label="最新委托信息">
                        <el-table-column prop="taskType" label="类型" width="120">
                        </el-table-column>
                        <el-table-column prop="description" label="内容" width="120" show-overflow-tooltip>
                        </el-table-column>
                        <!-- <el-table-column prop="ownerId" label="发布者" width="80">
                        </el-table-column> -->
                        <el-table-column prop="startTime" label="发布时间" width="180">
                        </el-table-column>
                        <el-table-column prop="location" label="地点" width="120">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="14">
            <div class="num">
                <el-card v-for="item in countData" :key="item.name"
                    :body-style="{ display: 'flex', padding: '0px', 'align-items': 'center', height: '50px', padding: '5px', width: '190px', margin: '5px 5px' }">
                    <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color }" />
                    <div class="detail">
                        <p class="price">{{ item.value }}条</p>
                        <p class="desc">{{ item.name }} 委托</p>
                    </div>
                </el-card>
            </div>

            <el-card :body-style="{ padding: '0px', width: '850px', }">
                <div ref="echarts1" class="echarts1" style="height: 220px">

                </div>
            </el-card>
            <div class="graph" style="height: 305px; margin-bottom: 5px; margin-top: 5px;">
                <el-card style="height: 290PX;margin-bottom: 5px; margin-right: 5px;">
                    <div slot="header" class="clearfix" style="padding: 10px 10px;">
                        <span>我的委托发布</span>
                    </div>
                    <el-table :data="NewestInfo.tasksWithUser" height="190" style="width: 100%">
                        <el-table-column prop="taskId" label="任务ID" width="60"></el-table-column>
                        <el-table-column prop="description" label="描述" width="60"
                            show-overflow-tooltip></el-table-column>
                        <el-table-column prop="type" label="类型" width="60"></el-table-column>
                        <el-table-column prop="location" label="地点" width="60"></el-table-column>
                        <el-table-column prop="status" label="状态" width="60"></el-table-column>
                        <el-table-column prop="startTime" label="开始时间" width="120"
                            show-overflow-tooltip></el-table-column>
                        <el-table-column prop="endTime" label="结束时间" width="120"
                            show-overflow-tooltip></el-table-column>
                    </el-table>

                </el-card>
                <el-card style="height: 290PX; margin-bottom: 5px;">
                    <div slot="header" class="clearfix el-card-header" style="padding: 10px 10px;">
                        <span>我的委托接收</span>

                    </div>

                    <el-table :data="NewestInfo.taskAcceptRecordsWithUser" height="190" style="width: 100%">
                        <el-table-column prop="acceptRecordId" label="接受记录ID"></el-table-column>
                        <el-table-column prop="status" label="状态"></el-table-column>
                        <el-table-column prop="accepterId" label="接受者ID"></el-table-column>
                        <el-table-column prop="taskId" label="任务ID"></el-table-column>
                        <el-table-column prop="acceptTime" label="接受时间" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="adoptTime" label="采用时间" show-overflow-tooltip></el-table-column>
                    </el-table>

                </el-card>
            </div>



        </el-col>
    </el-row>
</template>
<script>

    import * as echarts from 'echarts';
    import { mapState } from 'vuex';
    import { getData } from '@/api';
    import { data } from 'jquery';
    import { getTaskCategoriesUser } from '@/api/user';



    export default {
        components: {},
        data() {
            return {
                tableData: [{
                    description: '2016-05-03',
                    startTime: '活动名称',
                    type: '参赛资格',
                    location: '0',
                    ownerID: ''

                },
                {
                    description: '2016-05-03',
                    startTime: '活动名称',
                    type: '参赛资格',
                    location: '0',
                    ownerID: ''

                },
                {
                    description: '2016-05-03',
                    startTime: '活动名称',
                    type: '参赛资格',
                    location: '0',
                    ownerID: ''

                },
                {
                    description: '2016-05-03',
                    startTime: '活动名称',
                    type: '参赛资格',
                    location: '0',
                    ownerID: ''

                },],

                countData: [
                    {
                        name: "今日已接受",
                        value: 12,
                        icon: "success",
                        color: "#2ec7c9",
                    },
                    {
                        name: "本周已接受",
                        value: 13,
                        icon: "star-on",
                        color: "#ffb980",
                    },
                    {
                        name: "本月已接受",
                        value: 14,
                        icon: "s-goods",
                        color: "#5ab1ef",
                    },
                    {
                        name: "今日已发布",
                        value: 14,
                        icon: "success",
                        color: "#2ec7c9",
                    },
                    {
                        name: "本周已发布",
                        value: 14,
                        icon: "star-on",
                        color: "#ffb980",
                    },
                    {
                        name: "本月已发布",
                        value: 14,
                        icon: "s-goods",
                        color: "#5ab1ef",
                    },
                ],
                tableLabel: {
                    name: '活动名称',
                    type: '参赛资格',
                    fee: '费用'
                },
                userInfo: {
                    userName: '',
                    type: '',
                    avatarSrc: ''
                },
                taskTypeOption: [],
                taskType: {},

                NewestInfo: {
                    systemAnnouncements: {},
                    newestTask: {},
                    hotTaskCategory: {},
                    transactionStats: {
                        "今日已接受": 1,
                        "本周已接受": 4,
                        "本月已接受": 7,
                        "今日已发布": 1,
                        "本周已发布": 9,
                        "本月已发布": 13
                    },
                    tasksWithUser: [
                        {
                            "taskId": 136,
                            "ownerId": 3,
                            "receiverId": null,
                            "createdAt": "2024年05月17日08:24:27",
                            "description": "微型计算机课设辅导",
                            "type": 5,
                            "location": "教学楼",
                            "startTime": null,
                            "endTime": null,
                            "status": "等待发布"
                        },
                        {
                            "taskId": 135,
                            "ownerId": 3,
                            "receiverId": null,
                            "createdAt": "2024年05月17日08:24:11",
                            "description": "单片机课设辅导",
                            "type": 5,
                            "location": "教学楼",
                            "startTime": null,
                            "endTime": null,
                            "status": "等待发布"
                        },
                        {
                            "taskId": 134,
                            "ownerId": 3,
                            "receiverId": 2,
                            "createdAt": "2024年05月17日02:56:44",
                            "description": "国家法律法规和学校相关规定知识普及卫士",
                            "type": 10,
                            "location": "教学楼",
                            "startTime": "2024年05月17日00:00:00",
                            "endTime": "2024年05月31日00:00:00",
                            "status": "已完成"
                        },
                        {
                            "taskId": 133,
                            "ownerId": 3,
                            "receiverId": null,
                            "createdAt": "2024年05月16日14:59:16",
                            "description": "招募一位会书籍管理的同学，有重谢",
                            "type": 10,
                            "location": "图书馆",
                            "startTime": "2024年05月16日00:00:00",
                            "endTime": "2024年05月31日00:00:00",
                            "status": "委托发布中"
                        },
                        {
                            "taskId": 132,
                            "ownerId": 3,
                            "receiverId": null,
                            "createdAt": "2024年05月16日14:57:27",
                            "description": "招募一位统计数学的大四同学",
                            "type": 10,
                            "location": "教学楼",
                            "startTime": "2024年05月16日00:00:00",
                            "endTime": "2024年05月31日00:00:00",
                            "status": "委托发布中"
                        }
                    ],
                    taskAcceptRecordsWithUser: [
                        {
                            "acceptRecordId": 2,
                            "status": "待处理",
                            "accepterId": 3,
                            "taskId": 2,
                            "str": "22342",
                            "acceptTime": "2024年05月22日14:31:13",
                            "adoptTime": null
                        },
                        {
                            "acceptRecordId": 5,
                            "status": "未选中",
                            "accepterId": 3,
                            "taskId": 106,
                            "str": "我是李思远",
                            "acceptTime": "2024年05月08日16:25:48",
                            "adoptTime": "2024年05月08日22:03:47"
                        },
                        {
                            "acceptRecordId": 7,
                            "status": "已过期",
                            "accepterId": 3,
                            "taskId": 127,
                            "str": "接受者不能是同一用户",
                            "acceptTime": "2024年05月15日18:00:37",
                            "adoptTime": "2024年05月15日18:28:29"
                        },
                        {
                            "acceptRecordId": 8,
                            "status": "待处理",
                            "accepterId": 3,
                            "taskId": 131,
                            "str": "我在剧院有朋友",
                            "acceptTime": "2024年05月16日15:05:26",
                            "adoptTime": null
                        }
                    ]

                }
            }
        },
        mounted() {
            this.setContext();
            const sportsUser = localStorage.getItem('TaskUser')
            const parsedUser = JSON.parse(sportsUser);
            this.userInfo = parsedUser
            console.log("userInfo", this.userInfo)
            getData(parsedUser.userId).then((data) => {
                this.NewestInfo = data.data.data;
                console.log("快速信息展示", this.NewestInfo.newestTask);
                this.tableData = this.NewestInfo.newestTask;
                this.tableData.forEach(item => {
                    item.taskType = this.taskType[`${item.taskType}`];
                });
                this.countData.forEach(item => {
                    const key = item.name;
                    if (key in this.NewestInfo.transactionStats) {
                        item.value = this.NewestInfo.transactionStats[key];
                    } else {
                        console.warn(`No matching statistic found for key: ${key}`);
                    }
                });

                // var newMap = Object.keys(this.NewestInfo.hotTaskCategory).map(key => ({
                //     name: key,
                //     taskTypeId: this.NewestInfo.hotTaskCategory[key].typeCount
                // }))
                this.generateEchart1(this.NewestInfo.hotTaskCategory);
            })
        },
        methods: {
            setContext() {
                //获取类型
                getTaskCategoriesUser().then((data) => {
                    this.tabPanes = [];
                    this.taskTypeOption = [];
                    if (data.data.code === 1) {

                        if (data.data.data.length > 0) {

                            const taskCategories = data.data.data;

                            for (let i = 0; i < taskCategories.length; i++) {
                                this.tabPanes.push({
                                    label: taskCategories[i].name,
                                    id: taskCategories[i].id,
                                    DelegationType: taskCategories[i].description,
                                })

                                //生成键值对
                                this.taskType[`${taskCategories[i].id}`] = `${taskCategories[i].name}`
                                // this.taskTypeOption.push({ label: taskCategories[i].name, value: taskCategories[i].id })
                            }
                            // console.log("类型信息", this.tabPanes);
                            console.log(this.taskType);
                            console.log("类型数组", this.taskTypeOption);
                        }
                    }
                })
            },

            // 获取数据生成条状图
            generateEchart1(data) {
                const taskTypeNames = [];
                const typeCounts = [];

                for (const category in data) {
                    taskTypeNames.push(category);
                    typeCounts.push(data[category].typeCount);
                }


                const echarts1 = echarts.init(this.$refs.echarts1);
                var option = {
                    title: {
                        text: '热门委托统计'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
                    },
                    series: [
                        {
                            name: '委托统计',
                            type: 'bar',
                            data: [23, 23489, 29034, 104970, 131744, 12]
                        },

                    ]
                };

                option.yAxis.data = taskTypeNames;
                option.series[0].data = typeCounts;
                echarts1.setOption(option);
            },

            //时间格式转换
            DateToString(dateString) {

                const date = new Date(dateString);

                const year = date.getFullYear();
                const month = date.getMonth() + 1; // 月份是从0开始计数的，所以需要加1
                const day = date.getDate();
                const hours = date.getHours();
                const minutes = date.getMinutes();

                // 构建格式化后的字符串
                const formattedDate = `${year}年${month}月${day}日${hours}时${minutes}分`;

                return formattedDate
            }

        },
        // 在组件B中计算属性或mapState来访问状态  

        // computed: {
        //     ...mapState({
        //         avatarSrc: state => state.userInfo.avatarSrc
        //     })

        // }

    }
</script>

<style lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
    }

    .userImg {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;

        img {
            margin-right: 40px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .user-info {
            .username {
                font-size: 18px;
                margin-bottom: 4px;
            }

            .access {
                color: #888;
            }

        }

    }

    .login-info {
        p {
            line-height: 38px;
            font-size: 14px;
            color: #999999;

            span {
                color: #666666;
                margin-left: 60px;
            }
        }
    }

    .num {
        display: flex;
        flex-wrap: wrap;

        .icon {
            width: 60px;
            height: 50px;
            font-size: 55px;
            text-align: center;
            padding: auto;
            color: #000;
            border-radius: 16%;
            justify-content: center;
        }

        .detail {
            height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0px;
            margin-top: 0px;
            margin-left: 20px;

            .price {
                padding: 0px;
                margin-top: 0px;
                font-size: 24px;
                margin-bottom: 0px;
            }

            .desc {
                font-size: 12px;
                color: #999;
                text-align: center;
            }
        }

        .el-card {
            width: 31%;
            margin-right: 10px;
            margin-bottom: 10px;
            justify-content: space-between;
        }

    }

    .graph {
        display: flex;

        justify-content: space-between;
        padding: 0px;


    }

    #infoTitle {
        display: flex;
        justify-content: center;
    }

    #InfoTime {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: wrap;
        align-content: flex-end;
        padding-right: 10px;
    }

    .el-carousel__item h1 {
        color: #475669;
        font-size: 28px;
        opacity: 0.75;
        line-height: 70px;
        text-align: center;
        margin: 0;
    }

    .el-carousel__item p {
        color: #080808;
        font-size: 18px;
        opacity: 0.75;
        line-height: 40px;
        text-align: center;
        padding: 10px 20px;
    }

    .el-carousel__item:nth-child(2n) {
        background-size: 430px 320px;
        background-image: url("../assets/carousel.png");
    }

    .el-carousel__item:nth-child(2n+1) {
        background-image: url('../assets/carousel.png');
        background-size: 510px 320px;
    }

    .el-card ::v-deep .el-card__header {
        background-color: lightblue;
        padding: 0px 10px;
    }
</style>